<!-- 换货申请列表 -->
<template>
  <div class="exchangeGoods sys-content">
    <page-mod>
      <el-card>
        <div class="query-box">
          <el-form :model="query" inline>
            <el-form-item label="订单编号:">
              <el-input v-model="query.orderCode" placeholder="请输入订单编号" clearable/>
            </el-form-item>
            <el-form-item label="换货编号:">
              <el-input v-model="query.returnCode" placeholder="请输入换货编号" clearable/>
            </el-form-item>
            <el-form-item label="换货状态:">
              <el-select v-model="query.returnStatus" placeholder="请选择" clearable>
                <el-option label="待审核" value="0" />
                <el-option label="换货通过" value="1" />
                <el-option label="换货驳回" value="2" />
                <el-option label="买家发货中" value="3" />
                <el-option label="卖家收货中" value="4" />
                <el-option label="卖家发货中" value="5" />
                <el-option label="卖家已发货" value="6" />
                <el-option label="买家收货中" value="7" />
                <el-option label="换货完成" value="8" />
              </el-select>
            </el-form-item>
            <el-form-item label="申请时间:">
              <div style="width: 372px;">
                <el-date-picker 
                  v-model="dates" 
                  type="datetimerange" 
                  value-format="YYYY-MM-DD HH:mm:ss"
                  range-separator="至" 
                  start-placeholder="开始日期" 
                  end-placeholder="结束日期" 
                  style="width: 100%;" 
                  @change="dateChange"/>
              </div>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button icon="Search" color="#16b777" @click="load(1)">查询</el-button>
            <!-- <el-button icon="Plus" color="#FFB800" @click="addShow = true">新增</el-button> -->
            <el-button icon="Refresh" color="#FF5722" @click="resetSearch">重置</el-button>
          </div>
        </div>
      </el-card>
    </page-mod>
    <page-mod title="换货申请数据" icon="Switch" :showBtn="false" :padBottom="false">
      <el-card v-loading="loading" element-loading-text="拼命加载中" >
        <el-table :data="dataList" max-height="493" row-key="id" border>
          <el-table-column label="序号" type="index" align="center" width="60"></el-table-column>
          <el-table-column label="订单编号" prop="orderCode" align="center"></el-table-column>
          <el-table-column label="换货编号" prop="returnCode" align="center"></el-table-column>
          <el-table-column label="申请时间" prop="createdTime" align="center">
            <template #default="{row}">
              <span>{{ $date(row.createdTime).format('YYYY-MM-DD HH:mm:ss') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="换货原因" prop="reason" align="center"></el-table-column>
          <el-table-column label="换货描述" prop="description" align="center"></el-table-column>
          <el-table-column label="状态" prop="returnStatus" align="center">
            <template #default="{row}">
              <el-tag v-if="row.returnStatus === 0" type="info">待审核</el-tag>
              <el-tag v-if="row.returnStatus === 1" type="warning">换货通过</el-tag>
              <el-tag v-if="row.returnStatus === 2" type="warning">换货驳回</el-tag>
              <el-tag v-if="row.returnStatus === 3" type="danger">买家发货中</el-tag>
              <el-tag v-if="row.returnStatus === 4" type="danger">卖家收货中</el-tag>
              <el-tag v-if="row.returnStatus === 5" type="danger">卖家发货中</el-tag>
              <el-tag v-if="row.returnStatus === 6" type="danger">卖家已发货</el-tag>
              <el-tag v-if="row.returnStatus === 7" type="danger">买家收货中</el-tag>
              <el-tag v-if="row.returnStatus === 8" type="success">换货完成</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="120">
            <template #default="{row}">
              <el-button type="primary" icon="View" link @click="toView(row.returnId)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination 
          class="paging"
          v-show="query.total"
          small
          layout="total, sizes, prev, pager, next, jumper" 
          :current-page="query.current" 
          :page-size="query.size"
          :total="query.total"
          @current-change="load"
          @size-change="sizeChange">
        </el-pagination>
      </el-card>
    </page-mod>

    <!-- 新增 -->
    <!-- <el-drawer 
      v-model="addShow" 
      :with-header="false" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true" 
      size="89.6%">
      <exchange-goods-add @close="doAddClose"></exchange-goods-add>
    </el-drawer> -->
    <!-- 查看详情 -->
    <el-drawer 
      v-model="infoShow" 
      :with-header="false" 
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :destroy-on-close="true" 
      size="89.6%">
      <exchange-goods-info :returnId="returnId" @close="doInfoClose"></exchange-goods-info>
    </el-drawer>
  </div>
</template>

<script setup name="exchangeGoods">
  // import exchangeGoodsAdd from './add.vue'
  import exchangeGoodsInfo from './details.vue'
  import { getExchangeGoodsListPageApi } from '@/api/api'
  import { reactive, toRefs, getCurrentInstance, onActivated } from 'vue'

  // 获取注册的全局实列
  const currentThis = getCurrentInstance().appContext.config.globalProperties

  const currentData = reactive({
    loading: false,
    addShow: false,
    infoShow: false,
    dates: [],
    returnId: '',
    query: {
      orderCode: '',
      returnCode: '',
      returnStatus: '',
      startTime: '',
      endTime: '',
      current: 1,
      size: 20,
      total: 0
    },
    dataList: []
  })
  let {loading, addShow, infoShow, dates, returnId, query, dataList} = toRefs(currentData)

  // 查询
  function load(page) {
    currentData.loading = true
    currentData.query.current = page
    getExchangeGoodsListPageApi(currentData.query).then(res => {
      currentData.loading = false
      if(res.code === '200') {
        currentData.dataList = res.data.pages
        currentData.query.total = res.data.total
      } else {
        currentThis.$message.error(res.message)
      }
    })
  }

  // 查看按钮点击执行
  function toView(returnId) {
    currentData.returnId = returnId
    currentData.infoShow = true
  }

  // 关闭新增弹窗
  function doAddClose(e) {
    if(e) {
      load(currentData.query.current)
    }
    currentData.addShow = false
  }

  // 关闭查看弹窗
  function doInfoClose(e) {
    if(e) {
      load(currentData.query.current)
    }
    currentData.infoShow = false
  }

  // 查询下单时间改变时触发
  function dateChange(e) {
    currentData.query.startTime = e ? e[0] : ''
    currentData.query.endTime = e ? e[1] : ''
  }

  // 重置查询
  function resetSearch() {
    currentData.query.orderCode = ''
    currentData.query.returnCode = ''
    currentData.query.returnStatus = ''
    currentData.query.startTime = ''
    currentData.query.endTime = ''
    currentData.dates = []
    load(1)
  }

  function sizeChange(size) {
    currentData.query.size = size
    load(1)
  }

  onActivated(() => {
    load(currentData.query.current)
  })
</script>

<style lang="less" scoped>
.exchangeGoods{
  :deep(.el-drawer){
    .el-drawer__body{
      padding: 0 20px !important;
    }
  }
}
</style>